<template>
  <a-row class="card-nopd-out-container department-container">
    <a-col :span="3" class="tree-box process-chart">
      <makeListSide ref="makeListSideRef" @onSelect='onCardSelect' :listUrl="url.list" sideType="proc" :isEnvLocal="isEnvLocal" />
      <div v-if="isEnvLocal" class="px-10 pt-5">
        <a-button block type="primary" @click="syncData(syncDataAry, true)"> {{ $t('common.sync') }}</a-button>
      </div>
    </a-col>
    <a-col :span="21" class="table-box process-chart pt-20 pr-20">
      <div :class="['blue-line', {'mb-20': !showOpe()}]">{{$t('basicData.processVer')}}</div>
<!--      <div class="list-operate2" v-if="showOpe()">-->
      <div class="divBackgroundImg2  my-15" v-if="showOpe()">
          <a-button class="addBtn"  type="primary" :disabled="!selectMakeId" @click="handleOperate('add' )">
            <template #icon><PlusSquareOutlined /></template>{{ $t('common.addNew') }}
          </a-button>
      </div>
      <a-table :columns="columns" size="small" :dataSource="moProcVersionVOList" :pagination="false" :scroll="{y: showOpe() ? 'calc(100vh - 320px)': 'calc(100vh - 273px)'}">
        <template #bodyCell="{ column, text, record}">
          <template v-if="column.key === 'name'">
            <span class="code-link" @click="viewDetail(record)">{{record.name}} </span>
          </template>
          <template v-else-if="column.key === 'status'">
            <a-tag :color="text == 1? 'processing' : 'warning'">{{text == 1 ?$t('other.use'): $t('other.unUse')}}</a-tag>
          </template>
          <template v-else-if="column.key === 'operate'">
            <span class="table-operate-container">
              <a-button type="link" class="primary-link" @click="handleOperate('edit',record)">{{ $t('common.editor') }}</a-button>
              <a-divider type="vertical" />
              <a-button type="link" class="primary-link" @click="handleCopy(record.id)">{{ $t('other.copyTo') }}...</a-button>
              <a-divider type="vertical" />
              <a-button type="link" class="warning-link" @click="onDelete(record)">{{ $t('common.del') }}</a-button>
            </span>
          </template>
        </template>
      </a-table>
    </a-col>
    <copyRouteModal ref="copyRouteModal" @ok="otherOperate" />
    <SyncDataModal ref="syncDataModalRef" />
    <addProcessModal ref="addProcessModalRef" @ok="otherOperate" />
    <editProcessModal ref="editProcessModalRef" @ok="otherOperate" />
    <viewProcessModal ref="viewProcessModalRef" @operateProc="handleOperate" />
  </a-row>
</template>

<script>
import { PlusSquareOutlined } from '@ant-design/icons-vue'
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { normalColumns, localColumns } from './newModules/processConfig'
import copyRouteModal from '@/views/makeManage/routeChart/newModules/copyRouteModal.vue'
import makeListSide from './newModules/makeListSide.vue'
import SyncDataModal from '@/components/syncModal/syncDataModal.vue'
import addProcessModal from './newModules/addProcessModal.vue'
import editProcessModal from './newModules/editProcessModal.vue'
import viewProcessModal from './newModules/viewProcessModal.vue'

export default {
  name: 'makeProcess',
  mixins: [ListMixinPm],
  components: { copyRouteModal, makeListSide, SyncDataModal, addProcessModal, editProcessModal, viewProcessModal, PlusSquareOutlined },
  data () {
    return {
      url: {
        delete: '/api/mo/mo-proc/delete',
        list: '/api/mo/mo-proc/page',
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: [],
      moProcVersionVOList: [],
      selectMakeId: null,
      syncDataAry: [
        { syncIotCloudDataType: 'ihs:production:manufactureorder' },
        { syncIotCloudDataType: 'ihs:production:style' },
        { syncIotCloudDataType: 'ihs:basic:color' },
        { syncIotCloudDataType: 'ihs:basic:size' },
        { syncIotCloudDataType: 'ihs:basic:productPart' },
        { syncIotCloudDataType: 'ihs:production:order' },
        { syncIotCloudDataType: 'ihs:production:customer' },
        { syncIotCloudDataType: 'ihs:system:attachment' }
      ]
    }
  },
  methods: {
    loadData () { },
    async viewDetail (record) {
      this.$refs.viewProcessModalRef.open({ moId: record.moId, processId: record.id })
    },
    async handleOperate (type, record, isViews) {
      type == 'add' ? await this.$refs.addProcessModalRef.open(isViews ? record : { moId: this.selectMakeId })
        : await this.$refs.editProcessModalRef.open(isViews ? record : { moId: record.moId, processId: record.id })
      this.$refs.viewProcessModalRef.onCancel()
    },
    otherOperate () {
      this.$refs.makeListSideRef.loadData(true)
    },
    onDelete (record) {
      if (record.status == 1) {
        if (record.isScheduleBill == 1) {
          this.handleDelete1(this.$t('other.nowRoadUsedPleaseUnbing'))
        } else {
          this.handleDelete(record.id, true, this.$t('other.delArtBeDel'), this.$t('common.del'))
        }
      } else {
        this.handleDelete(record.id, true)
      }
    },
    handleCopy (id) {
      this.$refs.copyRouteModal.open(id)
    },
    onCardSelect (record) {
      this.moProcVersionVOList = record.moProcVersionVOList || []
      this.selectMakeId = record.id
    },
    showOpe () {
      return !this.isEnvLocal
    }
  },
  created () {
    this.columns = this.isEnvLocal ? localColumns : normalColumns
  }
}
</script>

<!--<style lang="less" scoped>-->
<!--.list-operate2 {-->
<!--  position: relative;-->
<!--  display: inline-block;-->
<!--  &#45;&#45;time: 1.5s;-->

<!--  display: inline-block;&::before {-->
<!--    position: absolute;-->
<!--    top: 0;-->
<!--    left: 0;-->
<!--    content: '';-->
<!--    width: 100%;-->
<!--    height: 100%;-->
<!--    z-index: 1;-->
<!--    background: #c7e0fd;-->
<!--    animation: scaleSize var(&#45;&#45;time) linear infinite;-->
<!--    border-radius: 2px;-->
<!--  }-->
<!--}-->

<!--.addBtn {-->
<!--  border-image-source: radial-gradient(60% 60%, transparent 0px, transparent 100%, #1890ff 100%);-->
<!--  border-image-slice: 1;-->
<!--  border-width: 2px;-->
<!--  border-style: solid;-->
<!--  border-image-outset: 6px;-->
<!--  animation:scale var(&#45;&#45;time)  linear infinite ;-->
<!--  z-index: 2;-->
<!--}-->

<!--@keyframes scale {-->
<!--  0% {-->
<!--    border-image-outset: 5px;-->
<!--  }-->
<!--  50% {-->
<!--    border-image-outset: 12px;-->
<!--  }-->
<!--  100% {-->
<!--    border-image-outset: 5px;-->
<!--  }-->
<!--}-->

<!--@keyframes scaleSize {-->
<!--  0% {-->
<!--   transform: scale(1.04, 1.04);-->
<!--  }-->
<!--  50% {-->
<!--    transform: scale(1.48, 2.1);-->
<!--  }-->
<!--  100% {-->
<!--    transform: scale(1.04, 1.04);-->
<!--  }-->
<!--}-->
<!--</style>-->